<!--
 *Author：jxx
 *Date：{Date}
 *Contact：283591387@qq.com
 *业务请在@/extension/mes/mes/ProcessInspection.jsx或ProcessInspection.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
 -->
<template>
    <div class="grid">
        <view-grid ref="grid" :columns="columns" :detail="detail" :details="details" :editFormFields="editFormFields"
            :editFormOptions="editFormOptions" :searchFormFields="searchFormFields"
            :searchFormOptions="searchFormOptions" :table="table" :extend="extend" :onInit="onInit" :onInited="onInited"
            :searchBefore="searchBefore" :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore"
            :rowClick="rowClick" :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter">
            <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
            <template #gridHeader>
            </template>
        </view-grid>
    </div>
    <SelectInspectionPlan ref="inspectionPlanRef" @onSelectInspectionPlan="onSelectInspectionPlan">
    </SelectInspectionPlan>
    <SelectInspectionProject ref="inspectionProjectRef" @onSelectInspectionProject="onSelectInspectionProject">
    </SelectInspectionProject>
</template>
<script setup lang="jsx">
import SelectInspectionProject from './ProcessInspectionSelectInspectionProject.vue'
import SelectInspectionPlan from './ProcessInspectionSelectInspectionPlan.vue'
import extend from "@/extension/mes/mes/ProcessInspection.jsx";
import viewOptions from './ProcessInspection/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
const grid = ref(null);
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
const inspectionPlanRef = ref();
const inspectionProjectRef = ref();

let gridRef;//对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
    gridRef = $vm;
    //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
    //更多属性见：https://doc.volcore.xyz/docs/view-grid

    const inspectionPlanOption = gridRef.getFormOption("InspectionPlanNo");
    inspectionPlanOption.readonly = true;
    inspectionPlanOption.extra = {
        icon: 'el-icon-zoom-out', //显示图标
        text: '选择', //显示文本
        style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
        //触发事件
        click: (item) => {
            inspectionPlanRef.value.open();
        }
    };
}
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
    columns.forEach(x => {
        //开启表头过滤
        x.filterData = true;
    })
    //明细表行数据检验项目设置弹出框选择数据
    detail.columns.forEach((x) => {
        if (x.field == 'InspectionProjectNo') {
            x.render = (h, { row, column, index }) => {
                x.edit = null;//设置当前字段不可编辑
                return (
                    <div>
                        <el-button link
                            onClick={($e) => {
                                $e.stopPropagation();
                                //触发事件
                                inspectionProjectRef.value.open(row)
                            }}
                            class="el-icon-search"
                            style="color: #2196F3;cursor: pointer;"
                        ></el-button>
                        <span style="margin-left:5px">{row.InspectionProjectNo}</span>
                    </div>
                );
            };
        }
    })

}
const searchBefore = async (param) => {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
}
const searchAfter = async (rows, result) => {
    return true;
}
const addBefore = async (formData) => {
    //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
    return true;
}
const updateBefore = async (formData) => {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
}
//选择检验方案表格回写事件
const onSelectInspectionPlan = (row) => {
    console.log('表格回写事件')
    let url = 'api/ProcessInspection/selectInspectionPlan';
    proxy.http.post(url, row).then((result) => {
        gridRef.editFormFields.InspectionPlanId = result[0].inspectionPlanId
        gridRef.editFormFields.InspectionPlanNo = result[0].code
        gridRef.editFormFields.InspectionPlanName = result[0].name
        gridRef.editFormFields.Description = result[0].description

        result[0].inspectionPlanDetail.forEach(item => {
            gridRef.getTable().addRow({
                InspectionPlanId: item.inspectionPlanId,
                InspectionProjectId: item.inspectionProjectId,
                InspectionProjectNo: item.inspectionProjectNo,
                InspectionProjectName: item.inspectionProjectName,
                StandardValue: item.standardValue,
                Description: item.description
            });
        });

        console.log(gridRef.getTable().rowData)
    });
}

const rowClick = ({ row, column, event }) => {
    //查询界面点击行事件
    grid.value.toggleRowSelection(row); //单击行时选中当前行;
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
    return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
    //弹出框打开后方法,设置表单默认值,按钮操作等
    gridRef.editFormFields
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
